<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box flex-box-display">
                <el-button size="medium" @click="back">返回</el-button>
                <el-button size="medium" @click="submitItem('ruleForm')">保存</el-button>
            </div>
            <div class="cate-con">
                <el-table :data="ruleForm" ref="ruleForm" :rules="rules" border style="width: 100%">
                    <el-table-column :resizable="true" prop="id" label="id">
                        <template slot-scope="scope">
                            <span>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sort" label="编号">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.sn" placeholder="请输入编号"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="name" label="名称">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="title" label="补充名称">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.title" placeholder="请输入补充名称"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="click_count" label="点击量">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.click_count" placeholder="请输入点击量"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sales_count" label="销售量">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.sales_count" placeholder="请输入销售量"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" label="数量">
                        <template slot-scope="scope">
                            <span>{{scope.row.number}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="market_price" label="市场价">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.market_price" placeholder="请输入市场价"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sale_price" label="优惠价">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.sale_price" placeholder="请输入优惠价"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="unit" label="单位">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.unit" placeholder="请输入单位"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sale_start_date" label="销售开始时间">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-model="scope.row.sale_start_date"
                                    type="datetime"
                                    placeholder="请选择销售开始时间">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sale_end_date" label="销售结束时间">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-model="scope.row.sale_end_date"
                                    type="datetime"
                                    placeholder="请选择销售结束时间">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="true" prop="sort" label="排序值(越小越靠前)">
                        <template slot-scope="scope">
                            <el-input v-model.number="scope.row.sort" placeholder="请输入排序值"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                ruleForm: [],
                tableLoading: false,
                rules: {
                    sn: [{required: true, message: '请输入编号', trigger: 'blur'},{type:'number', message: '编号必须为数字'}],
                    name: [{required: true, message: '请填写名称', trigger: 'blur'}],
                    title: [{required: true, message: '请填写补充名称', trigger: 'blur'}],
                    click_count: [{required: true, message: '请填写点击量', trigger: 'blur'},{type:'number', message: '点击量必须为数字'}],
                    sales_count: [{required: true, message: '请填写销售量', trigger: 'blur'},{type:'number', message: '销售量必须为数字'}],
                    market_price: [{required: true, message: '请填写市场价', trigger: 'blur'},{type:'number', message: '市场价必须为数字'}],
                    sale_price: [{required: true, message: '请填写优惠价', trigger: 'blur'},{type:'number', message: '优惠价必须为数字'}],
                    unit: [{required: true, message: '请填写单位', trigger: 'blur'}],
                    sale_start_date: [{required: true, message: '请填写销售开始时间', trigger: 'blur'}],
                    sale_end_date: [{required: true, message: '请填写销售结束时间', trigger: 'blur'}]
                },
            }
        },
        computed: {},
        mounted() {},
        created() {
            this.ruleForm = this.$route.query.section.map(item => item);
            console.log('加载页面数据',this.ruleForm)
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            submitItem() {
                console.log('保存',this.ruleForm);
                        this.$confirm('确认修改商品信息?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                            // .then(() => this.ruleForm.forEach(item => this.validate(item)))
                            .then(() => this.genData(this.ruleForm))
                            .then(data => this.postData(data))
                            .then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            })
                            .catch(err => this.$message({
                                type: 'error',
                                message: `修改失败 ${err}`
                            }));
            },
            // validate(data) {
            //     const re = /^[0-9]+.?[0-9]*/
            //     const { sn, click_count, number, sales_count, market_price, sale_price, sale_start_date, sale_end_date} = data;
            //     console.log('验证',data)
            //     if (!sn) return Promise.reject('请输入编号');
            //     if (!market_price) return Promise.reject('请输入市场价');
            //     if (!sale_price) return Promise.reject('请输入销售价');
            //     if (!sale_start_date) return Promise.reject('请输入销售开始时间');
            //     if (!sale_end_date) return Promise.reject('请输入销售结束时间');
            //
            //     if (!re.test(click_count)) return Promise.reject('点击量必须为数字');
            //     if (!re.test(sales_count)) return Promise.reject('销售量必须为数字');
            //     if (!re.test(sn)) return Promise.reject('编号必须为数字');
            //     if (!re.test(market_price)) return Promise.reject('市场价必须为数字');
            //     if (!re.test(sale_price)) return Promise.reject('销售价必须为数字');
            //     if (!re.test(sale_start_date)) return Promise.reject('销售开始时间必须为数字');
            //     if (!re.test(sale_end_date)) return Promise.reject('销售结束时间必须为数字');
            //
            //     return data;
            // },
            genData(data) {
                console.log('得到数据',data);
                const dataList = data.map(item => {
                    return {
                        id: item.id,
                        sn: item.sn,
                        name: item.name,
                        title: item.title,
                        click_count: item.click_count,
                        sales_count: item.sales_count,
                        market_price: item.market_price,
                        sale_price: item.sale_price,
                        unit: item.unit,
                        sale_start_date: item.sale_start_date,
                        sale_end_date: item.sale_end_date,
                        sort: item.sort,
                        cat_id: item.categories ? item.categories.map(item => item.id).join(',') : '',
                        number: item.number,
                        is_on_sale: item.is_on_sale,
                        is_best: item.is_best,
                        is_new: item.is_new,
                        is_hot: item.is_hot,
                        day_buy_number: item.day_buy_number,
                        is_timely_sort: item.is_timely_sort,
                        image: item.image,
                        slideshows: item.slideshow ? item.slideshow.map(item => item.url).join(',') : '',
                        content_images: item.contents ? item.contents.map(item => item.url).join(',') : '',
                        attributes:item.attributes,
                        _method: 'PUT'
                    }

                })
                return dataList;
            },

            singlePost(data,id) {
                console.log('当前数据',data,'id值',data.id)
                return axios
                    .post(`admin_goods/${id}`, data)
                    .then(res => (res.data.status === 1 ? 'OK' : Promise.reject()));
            },
            postData(data) {
                console.log('上交',data);
                // let result = data.reduce(
                //     (cur, next) => this.singlePost(cur).then(() => this.singlePost(next)),
                //     Promise.resolve()
                // );
                // return result;
               data.forEach(item => {
                   this.singlePost(item,item.id)
               })

            },

        }
    }
</script>
<style scoped>
    .cate-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }

    .cate-search {
        padding: 10px 30px 0 30px;
    }

    .cate-con {
        padding: 5px 20px 20px 20px;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }
</style>